<!--
 * @Author      : 徐博
 * @Date        : 2024-05-11 16:52:36
 * @LastEditTime: 2024-05-21 17:49:53
 * @LastEditors : 徐博
 * @FilePath    : vue3-ts-vite/src/components/fe-menu/fe-menu-item.vue
 * @Description : 菜单组件
 */
 -->
<template>
  <a-sub-menu :key="menuItem.id" >
    <template #icon>
<!--      <icon-font class="icon-font" :type="menuItem.icon"></icon-font>-->
        <component class="icon-font" :is="proxy.$icons[menuItem.icon]"></component>
    </template>
    <template #title>{{ t(menuItem.name) }}</template>
    <template v-if="menuItem?.children" v-for="item in menuItem.children">
      <a-menu-item v-if="!item.children.length" :key="item.id" @click.native="goTo(item)">{{ t(item.name)  }}</a-menu-item>
      <fe-menu-item v-else :menu-item="item" />
    </template>
  </a-sub-menu>
</template>

<script setup lang="ts">
import {defineProps, defineEmits, computed} from 'vue';
import { createFromIconfontCN } from '@ant-design/icons-vue';
import FeMenuItem from './fe-menu-item.vue';
import { useRouter } from 'vue-router';
import {useI18n} from "vue-i18n";
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

const {t} = useI18n();
const props = defineProps(['menuItem'])
const emits = defineEmits(['openChange'])
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3936425_kqj2n37qgf.js',
});
const router = useRouter()
const goTo = (item: any) => {
  emits('openChange', [item.parentId])
  router.push(item.url)
}
</script>

<style lang="less" scoped>
.icon-font {
  font-size: 24px;
}
</style>
